
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Shadow DOM 示例</title>
</head>
<body>
<h1>测试下shadow_root</h1>
<!-- 定义一个自定义元素占位符 -->
<my-shadow-element></my-shadow-element>

<script>    // 创建一个类继承 HTMLElement 类
class MyShadowElement extends HTMLElement {
    constructor() {
        super();

        // 创建 Shadow DOM 并附加
        const shadow = this.attachShadow({ mode: 'open' });

        // 创建表格结构
        const table = document.createElement('table');
        table.innerHTML = `          <tr>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
          <tr>
            <td>张三</td>
            <td>25</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>30</td>
          </tr>
        `;



        // 将表格和按钮添加到 Shadow DOM 中
        shadow.appendChild(table);



        for (let i = 0; i < 100; i++) {
            // 创建按钮
            const button = document.createElement('button');
            button.id = 'mybutton' + i;
            button.textContent = '点击我' + i;
            // 添加按钮点击事件
            button.addEventListener('click', () => {
                alert('按钮被点击了！');
            });
            shadow.appendChild(button);
            // 添加一个百度链接
            const link = document.createElement('a');
            link.id = 'mylink' + i;
            link.href = 'javascript:void(0);';
            link.textContent = '百度' + i;
            // 添加按钮点击事件
            link.addEventListener('click', () => {
                alert('链接被点击了！');
            });
            shadow.appendChild(link);
            shadow.appendChild(document.createElement('br'));
        }

    }
}

// 注册自定义元素
customElements.define('my-shadow-element', MyShadowElement);
</script>
</body>
</html>
